<template>
	<view style="background-color: #EFEFEF;width: 750rpx;height: 100vh;overflow: auto;">
		<u-toast ref="uToast" />
		<u-form :model="formData" ref="uForm">
		<view class="form_box">
			
			<view class="form_item">
				
				<!-- <view class="form_label">手机号码</view> -->
				<u-form-item label="　完整手机号" label-width="200rpx" prop="u_tel">
				<view class="form_input">
					<u-input v-model="formData.u_tel" placeholder="请输入您的手机号"/>
				</view>
				</u-form-item>
				
			</view>
			
			<view class="form_item">
				<u-form-item label="　　密　码　" label-width="200rpx" prop="u_password">
				<view class="form_input">
					<u-input v-model="formData.u_password" type="password" placeholder="请输入9-16位字母或数字"/>
				</view>
				</u-form-item>
			</view>
			
			<view class="form_item">
				
				<u-form-item label="　确认密码　" label-width="200rpx" prop="u_re_password">
				<view class="form_input">
					<u-input type="password" v-model="formData.u_re_password" placeholder="请再次输入您的密码"/>
				</view>
				</u-form-item>
			</view>
			
			<view class="form_item">
				
				<u-form-item label="　　验证码　" label-width="200rpx" prop="u_short_code">
				<view class="form_input">
					<u-input v-model="formData.u_short_code" placeholder="请输入您的验证码"/>
					<view class="butt" @click="onGet_code" v-if="s==0">获取验证码</view>
					<view v-if="s>0" class='butt'>({{s}})</view>
				</view>
				</u-form-item>
			</view>
			
		</view>
		
		<view style="margin-top: 20rpx;">
			<u-button @click="submit" style="background-color: #EA4389;"  type="error">{{ sub_status?'提交中...':'提交' }}</u-button>
		</view>
		
		</u-form>
		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				formData:{
					u_tel:'',
					u_password:'',
					u_re_password:'',
					u_short_code:''
				},
				rules:{
					u_tel:[
						{
							required: true,
							message: '请输入手机号',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change','blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					u_password:[
						{
							required: true,
							message: '请输入您的密码',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change','blur']
						},
						{
							validator: (rule, value, callback) => {
								return value.length>=9 && value.length<=16;
							},
							message: '请输入9-16位字母或数字',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					u_re_password:[
						{
							required: true,
							message: '请确认密码',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change','blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return value==this.formData.u_password
							},
							message: '两次密码输入的不一致',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					u_short_code:[
						{
							required: true,
							message: '请输入您的验证码',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change','blur']
						}
					]
				},
				sub_status:false,
				s:0
			}
		},
		methods:{
			setS(){
				this.s--;
				
				if(this.s>0){
					setTimeout(this.setS,1000);
				}
			},
			onGet_code(){
				var that=this;
				
				if(this.formData.u_tel==''){
					return this.$refs.uToast.show({
						title: '请输入手机号码'
					});
				}
				
				this.$request({
					url:'/sendtel/index',
					data:{phone:this.formData.u_tel,type:3},
					success(res){
						if(res.data.code==1){
							that.s=60;
							that.setS();
							
							that.$refs.uToast.show({
								title: '发送成功',
								type: 'success'
							});
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type: 'error'
							})
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(this.sub_status){
							return false
						}
						
						this.sub_status = true
						
						let that = this
						
						this.$request({
							url:'/user/password',
							data: this.formData,
							method:'post',
							success(res){
								
								if(res.statusCode==200){
									if(res.data.code==1){
										that.$refs.uToast.show({
											title: '修改成功~',
											type: 'success'
										})
										
										that.formData={
											u_tel:'',
											u_password:'',
											u_re_password:'',
											u_short_code:''
										}
										
										// that.formData.
									}else{
										that.$refs.uToast.show({
											title: res.data.msg,
											type: 'warning'
										})
									}
								}else{
									that.$refs.uToast.show({
										title: '网络繁忙',
										type: 'warning'
									})
								}
								
							},
							fail(err){
								
								that.$refs.uToast.show({
									title: '提交失败',
									type: 'warning'
								})
								
							},
							complete(){
								that.sub_status = false
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.form_box{
		width: 750rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}
	.form_box .form_item{
		min-height: 100rpx;
		/* border-bottom: 1px solid #EFEFEF; */
	}
	/* .form_box .form_item .form_label{
		width: 200rpx;
		text-align: center;
		font-size: 28rpx;
	} */
	.form_box .form_item .form_input{
		width: 530rpx;
		display: flex;
		align-items: center;
	}
	.form_box .form_item .form_input input{
		/* width: 490rpx; */
		color:#888;
		font-size: 28rpx;
		flex:1;
	}
	.form_box .form_item .form_input .butt{
		flex:1;
		background-color: #EA4389;
		color:#fff;
		height: 70rpx;
		border-radius: 100rpx;
		text-align: center;
		line-height: 70rpx;
		margin-left: 20rpx;
	}
</style>
